<!-- 智能张拉数据 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col
        :span="show ? rowObj.T1 : rowObj.F1"
        :xs="show ? rowObj.T2 : rowObj.F2"
      >
        <workSiteLeft
          ref="workSiteLeft"
          :show="show"
          @showLeft="showLeft"
          @queryVal="queryVal"
        />
      </el-col>

      <el-col
        :span="show ? rowObj.T3 : rowObj.F3"
        :xs="show ? rowObj.T4 : rowObj.F4"
      >
        <el-button
          size="mini"
          :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
          circle
          @click="showLeft(show)"
        ></el-button>
        张拉梁数据
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          class="elForm"
        >
          <div>
            <el-form-item label="梁场名称" prop="deviceId">
              <el-select
                style="width: 140px"
                filterable
                v-model="queryParams.deviceName"
                clearable
                size="mini"
                placeholder="请选择梁场名称"
              >
                <el-option
                  v-for="item in materielDeviceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="梁号" prop="beamNo">
              <el-input
                style="width: 100px"
                v-model="queryParams.beamNo"
                placeholder="梁号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="施工日期" prop="id">
              <deatetime ref="deatetime" v-model="queryParams.time"></deatetime>
            </el-form-item>

            <el-form-item label="是否合格" prop="status">
              <el-select
                style="width: 120px"
                v-model="queryParams.status"
                clearable
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="设备编号" prop="code">
              <el-select
                style="width: 170px"
                v-model="queryParams.code"
                clearable
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in codeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                v-hasPermi="['znzlyj:recording:query']"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </div>

          <div>
            <el-form-item>
              <el-button
                type="success"
                icon="el-icon-thumb"
                size="mini"
                v-hasPermi="['znzlyj:recording:collectTest']"
                :loading="warningLoading"
                @click="handleCollectData"
                >数据采集测试</el-button
              >
            </el-form-item>

            <el-form-item>
              <el-button
                type="success"
                :loading="checkLoading"
                icon="el-icon-thumb"
                size="mini"
                v-hasPermi="['znzlyj:recording:check']"
                @click="handleCheck"
                >手动校验</el-button
              >
            </el-form-item>
          </div>
        </el-form>

        <el-table
          border
          v-loading="loading"
          :data="recordingList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" fixed />
          <!-- <el-table-column label="所属单位" align="center" prop="deptName" min-width="120" show-overflow-tooltip /> -->
          <el-table-column
            label="梁场名称"
            align="center"
            prop="deviceName"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="设备名称"
            align="center"
            prop="instrumentManufacturer"
            min-width="200"
            filter-multipleshow-overflow-tooltip
          />
          <el-table-column
            label="设备编号"
            align="center"
            prop="mCode"
            min-width="200"
            filter-multipleshow-overflow-tooltip
          />
          <el-table-column
            label="张拉梁型"
            align="center"
            prop="beamType"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="梁号"
            align="center"
            prop="beamNo"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="张拉模式"
            align="center"
            prop="tensionMode"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="开始张拉时间"
            align="center"
            prop="tensionTime"
            width="160"
          >
            <template slot-scope="scope"
              ><span>{{ parseTime(scope.row.tensionTime) }}</span></template
            >
          </el-table-column>
          <el-table-column
            label="张拉人员"
            align="center"
            prop="tensionUser"
            min-width="90"
            show-overflow-tooltip
          />
          <el-table-column
            label="桩号"
            align="center"
            prop="stake"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            label="起拱度"
            align="center"
            prop="deflectionUpwards"
            min-width="90"
            show-overflow-tooltip
          />
          <el-table-column
            label="砼设计值(MPA)"
            align="center"
            prop="concreteDesign"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="砼强度(MPA)"
            align="center"
            prop="concreteStrength"
            min-width="110"
            show-overflow-tooltip
          />
          <el-table-column
            label="张拉加载速度"
            align="center"
            prop="loadingSpeed"
            min-width="110"
            show-overflow-tooltip
          />
          <el-table-column
            label="张拉加载初应力"
            align="center"
            prop="tensileStress"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column label="是否合格" align="center">
            <template slot-scope="scope">
              <span>{{
                scope.row.status == "1"
                  ? "合格"
                  : scope.row.status == "0"
                  ? "不合格"
                  : "未校验"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="300"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="result_handleDetails(scope.row)"
                >结果数据</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="result_handleUpdate(scope.row)"
                v-hasPermi="['znzlyj:recording:editing']"
                >报表编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-tickets"
                @click="handleReportForms(scope.row)"
                v-hasPermi="['znzlyj:recording:preview']"
                >报表预览</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                v-hasPermi="['znzlyj:recording:edit']"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 张拉结果数据对话框 -->
    <el-dialog
      title="张拉结果数据"
      fullscreen
      :visible.sync="dialogVisible"
      width="80%"
    >
      <el-table
        border
        v-loading="loading"
        :data="resultList"
        :span-method="objectSpanMethod"
        :max-height="tableHeight"
      >
        <!-- <el-table border v-loading="loading" :data="resultList" :max-height="tableHeight"> -->
        <el-table-column
          label="设备编号"
          align="center"
          prop="deviceCode"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="孔号"
          align="center"
          prop="holeNumber"
          min-width="80"
          show-overflow-tooltip
        />
        <el-table-column
          label="张拉时间"
          align="center"
          prop="tensioningTime"
          width="133"
        >
          <template slot-scope="scope"
            ><span>{{ parseTime(scope.row.tensioningTime) }}</span></template
          >
        </el-table-column>
        <el-table-column
          label="张拉断面"
          align="center"
          prop="tensioningSection"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="记录点"
          align="center"
          prop="measurementPoint"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          label="初始行程"
          align="center"
          prop="initialStroke"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="第一行程"
          align="center"
          prop="firstStroke"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="第二行程"
          align="center"
          prop="secondStroke"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="第三行程"
          align="center"
          prop="thirdStroke"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="第四行程"
          align="center"
          prop="fourthStroke"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="实测结论"
          align="center"
          prop="measuredConclusion"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="设计张力"
          align="center"
          prop="designTension"
          width="79"
          show-overflow-tooltip
        />
        <el-table-column
          label="设计伸长量"
          align="center"
          prop="designExtension"
          width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            scope.row.designExtension.toFixed(1)
          }}</template>
        </el-table-column>
        <el-table-column
          label="总伸长量"
          align="center"
          prop="totalExtension"
          width="79"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            scope.row.totalExtension.toFixed(1)
          }}</template>
        </el-table-column>
        <el-table-column
          label="延伸量误差"
          align="center"
          prop="extensionError"
          width="90"
          show-overflow-tooltip
        />
        <el-table-column
          label="超张百分比"
          align="center"
          prop="overTensionPercentage"
          width="90"
          show-overflow-tooltip
        />
        <el-table-column
          label="回缩量(mm)"
          align="center"
          prop="shrinkageAmount"
          width="95"
          show-overflow-tooltip
        />
        <el-table-column
          label="持荷时间(s)"
          align="center"
          prop="holdingTime"
          width="90"
        />
        <el-table-column
          label="记录时间"
          align="center"
          prop="recordTime"
          width="133"
        >
          <template slot-scope="scope"
            ><span>{{ parseTime(scope.row.recordTime) }}</span></template
          >
        </el-table-column>
        <el-table-column label="状态" align="center" width="60" v-if="false">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="danger">不合格</el-tag>
            <el-tag type="success" v-else>合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="80"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="process_handleDetails(scope.row)"
              >过程数据</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 张拉过程数据对话框 -->
    <el-dialog
      title="张拉过程数据"
      :visible.sync="open"
      width="80%"
      append-to-body
    >
      <el-table border v-loading="loading" :data="processList" max-height="500">
        <el-table-column
          prop="code"
          label="编号"
          align="center"
          width="160px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="equipmentNumber"
          label="设备编号"
          align="center"
          min-width="120px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="holeNumber"
          label="孔号"
          align="center"
          width="80px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="recordTime"
          label="记录时间"
          align="center"
          width="160px"
        ></el-table-column>
        <el-table-column
          prop="tensionTime"
          label="张拉此时"
          align="center"
          width="160px"
        ></el-table-column>
        <el-table-column
          prop="status1"
          label="状态1"
          align="center"
          width="80px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tensionForce1"
          label="张拉力1(KN)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="oilPressure1"
          label="油压1(MPA)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="topStroke1"
          label="顶行程1(mm)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="elongation1"
          label="伸长量1(mm)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status2"
          label="状态2"
          align="center"
          width="80px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tensionForce2"
          label="张拉力2(KN)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="oilPressure2"
          label="油压2(MPA)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="topStroke2"
          label="顶行程2(mm)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="elongation2"
          label="伸长量2(mm)"
          align="center"
          width="100px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="totalElongation"
          label="伸长量总和(mm)"
          align="center"
          min-width="120px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="designElongation"
          label="设计伸长量(mm)"
          align="center"
          min-width="120px"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>

      <pagination
        v-show="totalTwo > 0"
        :total="totalTwo"
        :page.sync="queryParamsTwo.pageNum"
        :limit.sync="queryParamsTwo.pageSize"
        @pagination="getDetailsList"
      />

      <!-- Echart图 -->
      <div class="chartBox">
        <div
          id="dayChart"
          style="`width: 100%;height: 100%;transform-origin: 0 0;`"
        ></div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 报表预览 -->
    <yi-dialog
      title="报表预览"
      ref="dialogReportForms"
      :visible.sync="dialogVisible_report"
      width="70%"
      fullscreen
      isHandle
      :isConfirm="false"
      top="0vh"
    >
      <!-- class="render-report" -->
      <!-- <TabsRender ref="TabsRender" @rederOver="rederOver"></TabsRender> -->
      <!-- <TabsRender ref="TabsRender" @rederOver="rederOver"></TabsRender> -->
      <ReportRender ref="ReportRender"></ReportRender>
      <div slot="more" class="more">
        <el-button
          class="print"
          type="primary"
          icon="el-icon-printer"
          size="small"
          @click="print()"
          v-hasPermi="['znzlyj:recording:export']"
          >打印/导出</el-button
        >
        <el-button
          class="print"
          type="primary"
          icon="el-icon-tickets"
          size="small"
          @click="exportPDF()"
          v-hasPermi="['znzlyj:recording:export']"
          >导出PDF</el-button
        >
      </div>
    </yi-dialog>

    <!-- 报表编辑 -->
    <yi-dialog
      title="报表编辑"
      class="render-dialog"
      :visible.sync="dialogVisible_reportEdit"
      width="70%"
      fullscreen
      isHandle
      :isConfirm="false"
      top="0vh"
    >
      <div style="width: 1200px; height: 1630px; margin-left: 43px">
        <ReportRender
          v-if="dialogVisible_reportEdit"
          ref="ReportRender"
        ></ReportRender>
      </div>
      <div slot="more" class="more">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-picture"
          @click="save()"
          >保存</el-button
        >
      </div>
    </yi-dialog>

    <!-- 报表编辑 -->
    <el-dialog
      title="张拉报表编辑"
      :visible.sync="centerDialogVisible"
      width="70%"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="张拉时砼强度(Mpa)" prop="concreteStrength"
              ><el-input
                v-model="form.concreteStrength"
                placeholder="张拉时砼强度(Mpa)" /></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="设计砼强度(Mpa)" prop="concreteDesign"
              ><el-input
                v-model="form.concreteDesign"
                placeholder="设计砼强度(Mpa)" /></el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="构件龄期" prop="gjlq"
              ><el-input
                v-model="form.gjlq"
                placeholder="构件龄期" /></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="钢材规格和每束根数" prop="gcgg"
              ><el-input
                v-model="form.gcgg"
                placeholder="钢材规格和每束根数" /></el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="张拉时温度℃" prop="temp"
              ><el-input
                v-model="form.temp"
                placeholder="张拉时温度℃" /></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="油表" prop="yb"
              ><el-input v-model="form.yb" placeholder="油表" /></el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="断丝占总数的百分率(%)" prop="dsbfl"
              ><el-input
                v-model="form.dsbfl"
                placeholder="断丝占总数的百分率(%)" /></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="千斤顶" prop="qjd"
              ><el-input
                v-model="form.qjd"
                placeholder="千斤顶" /></el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="桥梁名称" prop="bridgeName"
              ><el-input
                v-model="form.bridgeName"
                placeholder="桥梁名称" /></el-form-item
          ></el-col>
        </el-row>

        <!-- <el-table border :data="form.list" :span-method="setTableMethod"> -->
        <el-table border :data="form.list">
          <el-table-column
            label="每束钢材长度(m)"
            align="center"
            prop="holeLen"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.holeLen"
                placeholder="请输入"
                maxlength="40"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="滑、断丝数" align="center" prop="hdsNumber">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.hdsNumber"
                placeholder="请输入"
                maxlength="40"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSubmitForm">确 定</el-button>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 张拉修改 -->
    <el-dialog
      :title="titleZl"
      :visible.sync="openZl"
      width="40%"
      append-to-body
    >
      <!--   信息   -->
      <el-form ref="formZl" :model="formZl" :rules="rulesZl" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="梁场名称" prop="deviceName">
              <el-input
                v-model="formZl.deviceName"
                placeholder="请输入梁场名称"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="设备名称" prop="instrumentManufacturer">
              <el-input
                v-model="formZl.instrumentManufacturer"
                placeholder="请输入设备名称"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="设备编号" prop="mCode">
              <el-input
                v-model="formZl.mCode"
                placeholder="请输入设备编号"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!--     修改   -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="张拉梁型" prop="beamType">
              <el-input
                v-model="formZl.beamType"
                placeholder="请输入张拉梁型"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="梁号" prop="beamNo">
              <el-input v-model="formZl.beamNo" placeholder="请输入梁号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="张拉人员" prop="tensionUser">
              <el-input
                v-model="formZl.tensionUser"
                placeholder="请输入张拉人员"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="桩号" prop="stake">
              <el-input v-model="formZl.stake" placeholder="请输入桩号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="起拱度" prop="deflectionUpwards">
              <el-input
                type="number"
                v-model="formZl.deflectionUpwards"
                placeholder="请输入起拱度"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="砼设计值" prop="concreteDesign">
              <el-input
                type="number"
                v-model="formZl.concreteDesign"
                placeholder="请输入砼设计值"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="砼强度" prop="concreteStrength">
              <el-input
                type="number"
                v-model="formZl.concreteStrength"
                placeholder="请输入砼强度"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          :loading="buttonLoadingZl"
          type="primary"
          @click="submitFormZl"
          >确 定</el-button
        >
        <el-button @click="cancelZl">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
  listRecording,
  getRecording,
  delRecording,
  addRecording,
  updateRecording,
  listResult,
  processData,
  listHoleNumberSjfx,
  codeList,
} from "@/api/znzlyj/recording";
import {
  getReportDetail,
  getTensionReportEdit,
  putTensionReportEdit,
  isQualifiedList,
  materielDeviceListAll,
  handCheckRecordIng,
} from "@/api/znzlyj/recording";
import deatetime from "@/components/Datetime"; // 施工日期
import workSiteLeft from "@/views/components/workSiteLeft";
import TabsRender from "@/views/ReportDesign/TabsRender/TabsRender";
import ReportRender from "@/views/ReportDesign/components/ReportRender/ReportRender";
import { businessDeptTreeTop } from "@/api/common/common";
import { testCollectData } from "@/api/zhgd/hntManage";
import { handleRevoke } from "@/api/zhgd/nWarningHnt";

export default {
  name: "Recording",
  data() {
    return {
      warningLoading: false,
      tableHeight: 0,
      checkLoading: false,
      dialogVisible_report: false,
      dialogVisible_reportEdit: false,
      statusList: [
        { id: "0", name: "不合格" },
        { id: "1", name: "合格" },
      ],
      codeList: [],
      resultLength: 0,
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      dayChart: null,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalTwo: 0,
      // 张拉梁表格数据
      recordingList: [],
      // 张拉结果表格数据
      resultList: [],
      linkCode: "",
      baseCode: "",
      // 张拉过程表格数据
      processList: [],
      // 报表编辑束号列表
      // list: [],
      // 弹出层标题
      title: "",
      //过程数据弹框
      open: false,
      //结果数据弹框
      dialogVisible: false,
      // 报表编辑
      centerDialogVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsTwo: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        id: "",
        concreteStrength: "",
        concreteDesign: "",
        gjlq: "",
        gcgg: "",
        temp: "",
        yb: "",
        dsbfl: "",
        qjd: "",
        bridgeName: "",
        list: [],
      },
      // 表单校验
      rules: {
        id: [{ required: true, message: "id不能为空", trigger: "blur" }],
      },
      editId: "",
      materielDeviceList: [],
      titleZl: undefined,
      openZl: false,
      formZl: {},
      rulesZl: {
        beamType: [
          { required: true, message: "张拉梁型不能为空", trigger: "blur" },
        ],
        beamNo: [{ required: true, message: "梁号不能为空", trigger: "blur" }],
        tensionUser: [
          { required: true, message: "张拉人员不能为空", trigger: "blur" },
        ],
        stake: [{ required: true, message: "桩号不能为空", trigger: "blur" }],
      },
      buttonLoadingZl: false,
    };
  },
  components: {
    deatetime,
    workSiteLeft,
    TabsRender,
    ReportRender,
  },
  created() {
    this.getList();
    this.getMaterielDeviceListAll("");
    this.getCodeList();
  },
  methods: {
    getTableHeight() {
      this.tableHeight = window.innerHeight - 160;
      this.dialogVisible = true;
    },
    //采集数据测试
    handleCollectData() {
      this.$confirm("正式系统禁止采集数据！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "confirm-model",
        type: "warning",
      }).then((_) => {
        this.warningLoading = true;
        testCollectData("zl", this.queryParams.id)
          .then((res) => {
            this.warningLoading = false;
            this.getList();
          })
          .catch((err) => {
            this.warningLoading = false;
            this.getList();
          });
      });
    },
    // 梁场列表
    getMaterielDeviceListAll(code) {
      materielDeviceListAll({
        baseCode: code,
      }).then((res) => {
        this.materielDeviceList = res.rows || [];
      });
    },
    // 梁场设备编号
    getCodeList(code) {
      codeList({
        type: "1",
        baseCode: code,
      }).then((res) => {
        this.codeList = [];
        const list = res.data || [];
        list.forEach((item) => {
          this.codeList.push({ id: item.id, name: item.code });
        });
      });
    },
    // 保留两位小数
    fun(val) {
      return Number(val).toFixed(1);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.resultLength === 0) {
          return { rowspan: this.resultLength, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 1) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 2) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      // if (columnIndex === 3) {
      //   if (rowIndex % this.resultLength === 0) {
      //     return { rowspan: this.resultLength, colspan: 1 };
      //   } else {
      //     return { rowspan: 0, colspan: 0 };
      //   }
      // }
      if (columnIndex === 3) {
        if (rowIndex % 3 === 0) {
          return { rowspan: 3, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 11) {
        if (rowIndex % this.resultLength === 0) {
          return { rowspan: this.resultLength, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 12) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }

      if (columnIndex === 13) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 14) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 15) {
        if (rowIndex % this.resultLength === 0) {
          return { rowspan: this.resultLength, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 16) {
        if (rowIndex % 3 === 0) {
          return { rowspan: 3, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      // if (columnIndex === 18) {
      //   if (rowIndex % this.resultLength === 0) {
      //     return { rowspan: this.resultLength, colspan: 1 };
      //   } else {
      //     return { rowspan: 0, colspan: 0 };
      //   }
      // }
      // if (columnIndex === 19) {
      //   if (rowIndex % this.resultLength === 0) {
      //     return { rowspan: this.resultLength, colspan: 1 };
      //   } else {
      //     return { rowspan: 0, colspan: 0 };
      //   }
      // }
      if (columnIndex === 17) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 18) {
        if (rowIndex % 6 === 0) {
          return { rowspan: 6, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 19) {
        if (rowIndex % this.resultLength === 0) {
          return { rowspan: this.resultLength, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      if (columnIndex === 20) {
        if (rowIndex % this.resultLength === 0) {
          return { rowspan: this.resultLength, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
    // 报表编辑单元格合并
    setTableMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        if (rowIndex % 2) {
          return [1, 0];
        } else {
          return [2, 1];
        }
      }
    },
    // 左侧树点击事件
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.resultList = [];
      this.queryParams.deviceName = "";
      this.queryParams.id = val.id;
      this.getMaterielDeviceListAll(val.code);
      this.getCodeList(val.code);
      this.handleQuery();
    },
    /** 查询张拉梁列表 */
    getList() {
      this.loading = true;
      listRecording(this.queryParams).then((response) => {
        this.recordingList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        concreteStrength: undefined,
        concreteDesign: undefined,
        gjlq: undefined,
        gcgg: undefined,
        temp: undefined,
        yb: undefined,
        dsbfl: undefined,
        qjd: undefined,
        bridgeName: undefined,
        list: undefined,
      };
      this.resetForm("form");
    },
    resetZl() {
      this.$refs["formZl"].resetFields();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = this.getSearchParams();
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 手动校验
    handleCheck() {
      this.$confirm("正式系统禁止手动预警！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "confirm-model",
        type: "warning",
      })
        .then((_) => {
          this.checkLoading = true;
          if (this.ids.length) {
            handCheckRecordIng({ ids: this.ids })
              .then((res) => {
                this.checkLoading = false;
                if (res.code == 200) {
                  this.$message.success("手动校验成功！");
                  this.resetQuery();
                } else {
                  this.$message.error("手动校验失败！");
                }
              })
              .catch((err) => {
                this.$message.error("手动校验失败！");
                this.checkLoading = false;
              });
          } else {
            this.checkLoading = false;
            this.$message.error("请先在表格内勾选您要校验的数据！");
          }
        })
        .catch((_) => {});

      // this.checkLoading = true
      // businessDeptTreeTop().then((res) => {
      //   let arr = res.data.map((v) => v = v.id.toString())
      //   isQualifiedList({
      //     deptIdList: arr
      //   }).then((res1) => {
      //     this.checkLoading = false
      //     if (res1.code == 200) {
      //       this.$message.success('手动校验成功！')
      //       this.resetQuery()
      //     } else {
      //       this.$message.error('手动校验失败！')
      //     }
      //   }).catch(
      //     (err) => {
      //       this.$message.error('手动校验失败！')
      //       this.checkLoading = false
      //     }
      //   )
      // })
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.getMaterielDeviceListAll("");
      this.getCodeList("");
      this.$refs.workSiteLeft.resetQuery();
      this.queryParams.id = "";
      this.queryParams.deviceName = "";
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 点击结果数据列表
    result_handleDetails(row) {
      this.getTableHeight();

      this.linkCode = row.linkCode;
      listResult({ linkCode: this.linkCode }).then((response) => {
        this.resultList = response.data;
        this.resultLength = response.data.length;
      });
    },
    // 点击报表编辑按钮
    result_handleUpdate(row) {
      var reportId = "";
      var dictName = "";
      const match = row.beamType.match(/\d+/);
      if (match && match >= 30) {
        reportId = "1862016132864483329";
        dictName = "tensioning_report_15";
      } else {
        reportId = "1861938904705208321";
        dictName = "tensioning_report";
      }

      this.dialogVisible_reportEdit = true;
      this.editId = row.id;
      this.$nextTick(() => {
        this.$refs.ReportRender.editInit(dictName, {
          id: row.id,
          reportId: reportId,
          // linkCode: row.linkCode,
          stake: row.stake,
          beamNo: row.beamNo,
        });
      });
      // const id = row.id;
      // this.form.id = row.id;
      // this.editId = row.id;
      // this.linkCode = row.linkCode;
      // getTensionReportEdit(id).then((res1) => {
      //   if (res1.data != null) {
      //     this.form = res1.data;
      //   } else {
      //     this.reset();
      //   }
      //   getReportDetail({ linkCode: this.linkCode }).then((res2) => {
      //     // 相同束号去重
      //     let arrObj = res2.data;
      //     function fn1(tempArr) {
      //       for (let i = 0; i < tempArr.length; i++) {
      //         for (let j = i + 1; j < tempArr.length; j++) {
      //           if (tempArr[i].holeNumber == tempArr[j].holeNumber) {
      //             tempArr.splice(j, 1);
      //             j--;
      //           };
      //         };
      //       };
      //       return tempArr;
      //     };
      //     // console.log("111",fn1(arrObj))
      //     // this.form.list = res2.data;
      //     this.form.list = fn1(arrObj);
      //     this.centerDialogVisible = true;
      //   })
      // })
    },
    // 报表编辑确定按钮
    editSubmitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            putTensionReportEdit(this.form)
              .then((response) => {
                this.$modal.msgSuccess("保存成功");
              })
              .finally(() => {
                this.centerDialogVisible = false;
              });
          } else {
            this.form.id = this.editId;
            putTensionReportEdit(this.form)
              .then((response) => {
                this.$modal.msgSuccess("保存成功");
              })
              .finally(() => {
                this.centerDialogVisible = false;
              });
          }
        }
      });
    },
    rederOver() {
      setTimeout(() => {
        const element = this.$refs.dialogReportForms;
        element.$el.classList.add("render-report");
      }, 0);
    },
    // 点击报表预览按钮
    handleReportForms(row) {
      var reportId = "";
      var dictName = "";
      const match = row.beamType.match(/\d+/);
      if (match && match >= 30) {
        reportId = "1862016132864483329";
        dictName = "tensioning_report_15";
      } else {
        reportId = "1861938904705208321";
        dictName = "tensioning_report";
      }

      this.dialogVisible_report = true;
      this.$nextTick(() => {
        this.$refs.ReportRender.editDataRender(dictName, {
          id: row.id,
          reportId: reportId,
          // linkCode: row.linkCode,
          stake: row.stake,
          beamNo: row.beamNo,
        });
      });
    },
    // 点击修改
    handleEdit(row) {
      this.loading = true;
      this.reset();
      const id = row.id;
      getRecording(id).then((response) => {
        this.loading = false;
        this.formZl = response.data;
        this.$set(this.formZl, "deviceName", row.deviceName);
        this.$set(
          this.formZl,
          "instrumentManufacturer",
          row.instrumentManufacturer
        );
        this.$set(this.formZl, "mCode", row.mCode);
        this.openZl = true;
        this.titleZl = "修改张拉数据";
      });
    },
    // 导出PDF
    exportPDF() {
      // this.$refs.TabsRender.print();
      this.$refs.ReportRender.exportPDF();
    },
    // 打印
    print() {
      // this.$refs.TabsRender.print();
      this.$refs.ReportRender.print();
    },
    // 报表编辑保存
    save() {
      // 这个代码就是 取 报表设置的参数
      var dataBb = this.$refs.ReportRender.editSave();
      console.log(dataBb);

      // console.log(dataBb.dataReturn[0]);
      // let Obj = {
      //   concreteStrength:'',//张拉时砼强度
      //   concreteDesign:'',//设计砼强度
      //   gjlq:'',//构件龄期
      //   gcgg:'',//钢材规格和每束根数
      //   temp:'',//张拉时温度℃
      //   yb:'',//油表
      //   dsbfl:'',//断丝占总数的百分率
      //   qjd:'',//千斤顶
      //   bridgeName:'',//桥梁名称
      //   list:[
      //     {
      //       holeLen:'',//每束钢材长度
      //       hdsNumber:'',//滑、断丝数
      //     }
      //   ]

      // }
      var obj = dataBb.dataReturn[0];
      obj.id = this.editId;
      putTensionReportEdit(obj)
        .then((response) => {
          this.$modal.msgSuccess("保存成功");
        })
        .finally(() => {
          this.dialogVisible_reportEdit = false;
        });
    },
    getDetailsList() {
      processData({
        ...this.queryParamsTwo,
        linkCode: this.linkCode,
        baseCode: this.baseCode,
      }).then((response) => {
        this.processList = response.data.records;
        this.totalTwo = response.data.total;
      });
    },
    // 点击过程数据列表
    process_handleDetails(row) {
      this.open = true;
      this.linkCode = row.linkCode;
      processData({ ...this.queryParamsTwo, linkCode: this.linkCode }).then(
        (response) => {
          this.processList = response.data.records;
          this.totalTwo = response.data.total;
          this.loading = false;
        }
      );
      // Echart图
      listHoleNumberSjfx({
        linkCode: this.linkCode,
        baseCode: this.baseCode,
      }).then((response) => {
        if (document.getElementById("dayChart")) {
          this.createDayChart(response.data);
        } else {
          this.$nextTick(() => {
            this.createDayChart(response.data);
          });
        }
      });
    },
    createDayChart(data) {
      if (null == this.dayChart) {
        this.dayChart = echarts.init(document.getElementById("dayChart"));
      } else {
        this.dayChart.clear();
      }
      let aData = [];
      let bData = [];
      let cData = [];
      let dData = [];
      let eData = [];
      let fData = [];
      let gData = [];
      let hData = [];
      if (!!data) {
        data.forEach((v) => {
          for (const key in v) {
            switch (key) {
              case "elongation1":
                aData.push(v.elongation1);
                break;
              case "elongation2":
                bData.push(v.elongation2);
                break;
              case "oilPressure1":
                cData.push(v.oilPressure1);
                break;
              case "oilPressure2":
                dData.push(v.oilPressure2);
                break;
              case "tensionForce1":
                eData.push(v.tensionForce1);
                break;
              case "tensionForce2":
                fData.push(v.tensionForce2);
                break;
              case "topStroke1":
                gData.push(v.topStroke1);
                break;
              case "topStroke2":
                hData.push(v.topStroke2);
                break;
              default:
                break; //如果上面的条件都不能满足，则会执行default中的代码
            }
          }
        });
      }
      let option = this.getLineOption(
        aData,
        bData,
        cData,
        dData,
        eData,
        fData,
        gData,
        hData
      );
      this.dayChart.setOption(option);
    },
    /*** 获取图表配置信息*/
    getLineOption(aData, bData, cData, dData, eData, fData, gData, hData) {
      const colors = [
        "#5470C6",
        "#91CC75",
        "#EE6666",
        "#cc0000",
        "#8870C6",
        "#01CC75",
        "#FF8966",
        "#687777",
      ];
      let option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        title: {
          textStyle: { padingLeft: 100 },
        },
        legend: {
          data: [
            "张拉力1",
            "油压1",
            "顶行程1",
            "伸长量1",
            "张拉力2",
            "油压2",
            "顶行程2",
            "伸长量2",
          ],
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "18:54:31",
              "18:54:50",
              "18:55:06",
              "18:56:56",
              "19:18:24",
              "19:21:31",
              "19:23:28",
              "19:40:29",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "顶行程",
            min: 0,
            max: 1,
            position: "right",
            axisLine: {
              lineStyle: {},
            },
            axisLabel: {
              formatter: "{value} mm",
            },
          },
          {
            type: "value",
            name: "伸长量",
            min: 0,
            max: 500,
            position: "right",
            offset: 80,
            axisLine: {
              lineStyle: {},
            },
            axisLabel: {
              formatter: "{value} mm",
            },
          },
          {
            type: "value",
            name: "油压",
            min: 0,
            max: 50,
            position: "left",
            axisLine: {
              lineStyle: {},
            },
            axisLabel: {
              formatter: "{value} Mpa",
            },
          },
          {
            type: "value",
            name: "张拉力",
            min: 0,
            max: 1500,
            position: "left",
            offset: 80,
            axisLine: {
              lineStyle: {},
            },
            axisLabel: {
              formatter: "{value} KN",
            },
          },
        ],
        grid: {
          top: 80,
          left: "10%",
          right: "10%",
        },
        series: [
          {
            name: "张拉力1",
            type: "line",
            yAxisIndex: 1,
            data: eData,
          },
          {
            name: "油压1",
            type: "line",
            yAxisIndex: 2,
            data: cData,
          },
          {
            name: "顶行程1",
            type: "line",
            yAxisIndex: 1,
            data: gData,
          },
          {
            name: "伸长量1",
            type: "line",
            yAxisIndex: 2,
            data: aData,
          },
          {
            name: "张拉力2",
            type: "line",
            yAxisIndex: 1,
            data: fData,
          },
          {
            name: "油压2",
            type: "line",
            yAxisIndex: 1,
            yAxisIndex: 2,
            data: dData,
          },
          {
            name: "顶行程2",
            type: "line",
            yAxisIndex: 1,
            data: hData,
          },
          {
            name: "伸长量2",
            type: "line",
            yAxisIndex: 2,
            data: bData,
          },
        ],
      };
      return option;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateRecording(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addRecording(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    submitFormZl() {
      this.$refs["formZl"].validate((valid) => {
        if (valid) {
          this.buttonLoadingZl = true;
          if (this.formZl.id != null) {
            updateRecording(this.formZl)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.openZl = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoadingZl = false;
              });
          } else {
            this.$modal.msgSuccess("修改失败");
          }
        }
      });
    },
    cancelZl() {
      this.openZl = false;
      this.resetZl();
    },
  },
};
</script>

<style lang="scss" scoped>
.render-report {
  .el-table {
    height: initial !important;
  }
}
::v-deep .query {
  .el-form-item__label {
    width: 100px !important;
  }
}

.elForm {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.head-container {
  text-align: center;

  .el-select {
    width: calc(100vw * 280 / 2100);
  }
}

// Echart图
.chartBox {
  height: 400px;
  width: 100%;
  position: relative;
  margin-top: 80px;
}

.chartBoxHeight {
  height: 400px;
  width: 100%;
  position: relative;
}

.chartSearch {
  position: absolute;
  top: 0px;
  right: 60px;
}
</style>
<style lang="scss" scoped>
.confirm-model {
  .el-message-box__btns {
    .el-button:nth-child(1) {
      float: right;
    }
    .el-button:nth-child(2) {
      margin-right: 10px;
      /*background-color:#2d8cf0;*/
      /*border-color:#2d8cf0;*/
    }
  }
}
</style>
